<script setup lang="ts">
import { ref } from "vue";
import { useRouter } from "vue-router";
import "@/assets/css/styles.css";

// 获取路由实例
const router = useRouter();

// 用户信息
const userData = {
  id: 3,
  password: "123456",
  realName: "youyou",
  email: "123456@163.com",
  roles: ["user"],
  username: "youyou",
  icon: "/public/favicon.ico"
};

// 退出登录方法
const onLogout = () => {
  localStorage.removeItem("isLoggedIn");
  router.push({ name: "Login" }); // 假设登录页面的路由名称为 Login
};

// 弹框显示的状态
const showDialog = ref(false);

// 显示个人信息弹框
const showUserInfo = () => {
  showDialog.value = true;
};
</script>

<template>
  <div class="page-container">
    <!-- 第一个布局 -->
    <div class="button-group">
      <van-cell is-link title="个人信息" @click="showUserInfo" />
      <van-cell is-link title="会员功能" />
      <van-cell is-link title="数据罗盘" />
      <van-cell is-link title="经营分析" />
    </div>

    <!-- 第二个布局 -->
    <div class="button-group">
      <van-cell is-link title="智能助手" />
<!--      <van-cell is-link title="按钮b" />-->
<!--      <van-cell is-link title="按钮c" />-->
<!--      <van-cell is-link title="按钮d" />-->
    </div>

    <!-- 退出登录按钮 -->
    <div class="logout-container">
      <van-button round block type="danger" @click="onLogout">
        退出登录
      </van-button>
    </div>

    <!-- 弹框显示用户信息 -->
    <van-dialog v-model:show="showDialog" title="个人信息">
      <template #default>
        <div class="user-info-container">
          <!-- 用户头像 -->
          <van-image
            :src="userData.icon"
            alt="头像"
            width="80"
            height="80"
            class="user-avatar"
          />

          <!-- 用户信息 -->
          <div class="user-info">
            <p><strong>用户名:</strong> {{ userData.username }}</p>
            <p><strong>真实姓名:</strong> {{ userData.realName }}</p>
            <p><strong>邮箱:</strong> {{ userData.email }}</p>
          </div>
        </div>
      </template>
    </van-dialog>
  </div>
</template>